<template>
	<view class="main_container">
		<wanl-navbar :isBack="true" :background="{background: '#fff',}">
			<text slot="content" style="color: #000; width: 100%;padding-left: 20rpx;">
				抽奖
			</text>
			<text slot="right" style="color: #000;text-align:  right;padding-right: 20rpx;font-size: 28rpx"
				@click="jump()">
				抽奖记录
			</text>
		</wanl-navbar>
		<view class="turntable_box">
			<view class="container">
				<view v-for="(item, index) in drawList(awards)" :key="index" class="prize-item"
					:class="[item.name == '开始抽奖'?'kongbai':'']" @click="item.name == '开始抽奖'?start():''">
					<view class="active" v-if="currentIndex === index"></view>
					<image :src="$wanlshop.oss(item.img,50,50)" alt="" v-if="item.name != '开始抽奖'" />
					<p class="desc" v-if="item.name != '开始抽奖'">{{ item.name }}</p>
					<view v-if="item.name == '开始抽奖'" style="position: relative;width: 100%;height:100%">
						<image :src="item.img" alt="" style="width: 120%;height: 100%;" />
						<p style="
						position: absolute;
						    top: 23%;
						    left: 20%;
						    display: flex;
						    justify-content: center;
						    align-items: center;
						    flex-direction: column;
						    background: rgb(245, 56, 56);
						    border-radius: 50%;
						    width: 60%;
						    height: 60%;">
							<view style="color: #FFEC38;font-size: 32rpx;">
								抽奖
							</view>
							<view style="color:#fff;font-size: 20rpx;line-height: 30rpx"> {{ gift_sum }}次 </view>
						</p>
					</view>
				</view>
			</view>
			<view class="guize">
				<view class="guize_title">
					<image style="width: 180rpx;" mode="widthFix"
						src="https://d-shenhuashop.bigchun.com/h5test/yuanbao/choujiang/jieshao.png"></image>
				</view>
				<view class="guize_item" v-html="awardsRule">
					<!--					1.本次抽奖活动共持续7天，每个id每天可抽奖一次；-->
				</view>
				<!--				<view class="guize_item">-->
				<!--					2.包括一等奖1个、二等奖3个和三等奖5个；其中一等奖奖品为松下吹风机（价值500元），二等奖奖品为小熊烧水壶（价值200元），三等奖奖品为超市50元代金券。-->
				<!--				</view>-->
				<!--				<view class="guize_item">-->
				<!--					3.中奖的用户可凭中奖页面至XXX路1号店内兑换奖品！-->
				<!--				</view>-->
			</view>
		</view>
		<u-popup :show="showZhongjiang" :closeOnClickOverlay="true" :closeable="true" :overlayOpacity="0.7"
			mode="center" :customStyle="{background:'transparent'}" @close="showZhongjiang=false">
			<view class="lingjiangPopup">
				<view class="jiangpinContent">
					<view
						style="background: #fff2e6;width: 70%; height: 179px;margin:220rpx auto 0;display: flex;flex-direction: column;justify-content: center;align-items: center">
						<view style="color:#F12E1A;font-weight: bold;margin-bottom: 16rpx;">恭喜您获得{{award.name}}!</view>
						<view style="color:#F12E1A;font-weight: bold;margin-bottom: 16rpx; font-size:34rpx">
							{{ goodsData.goods_name }}一个
						</view>
						<image :src="goodsData.goods_img" style="width:240rpx;height: 240rpx;" mode="widthFix"></image>
					</view>
				</view>
				<view class="lingquBtn" @click="showZhongjiang=false;lingqu()">
					<!--					<image :src="'https://d-shenhuashop.bigchun.com/h5test/yuanbao/choujiang/lingqu.png'" style="width: 100%;height:100rpx; " mode="widthFix"></image>-->
				</view>
			</view>

		</u-popup>
		<u-popup :show="showWeizhongjiang" :overlayOpacity="0.7" :closeable="true" :closeOnClickOverlay="true"
			mode="center" :customStyle="{background:'transparent'}" @close="showWeizhongjiang=false">
			<view class="weilingjiangPopup">
				<view class="jiangpinContent">
					<view
						style="width: 70%;height: 200px;margin:24px auto 0;display: flex;flex-direction: column;justify-content: center;align-items: center">
						<view style="color:#8C3F23;font-weight: bold;margin-bottom: 16rpx;">很遗憾</view>
						<view style="color:#8C3F23;font-weight: bold;margin-bottom: 16rpx;">您没有中奖</view>
					</view>
					<view class="lingquBtn" @click="showWeizhongjiang=false">
						<!--						<image :src="'https://d-shenhuashop.bigchun.com/h5test/yuanbao/choujiang/weizhongjiangBtn.png'" style="width: 100%;" mode="widthFix"></image>-->
					</view>
				</view>

			</view>

		</u-popup>
	</view>
</template>
<script>
	export default {
		name: "nineSquaredPaper",
		data() {
			return {
				awards: [
					// // 图片名字与ID
					// { id: 1, name: 10,url:'https://d-shenhuashop.bigchun.com/h5test/yuanbao/choujiang/jiangpin1.png',desc: '一等奖' },
					// { id: 2, name: 100,url:'https://d-shenhuashop.bigchun.com/h5test/yuanbao/choujiang/jiangpin2.png' ,desc: '二等奖' },
					// { id: 3, name: 2,url:'https://d-shenhuashop.bigchun.com/h5test/yuanbao/choujiang/jiangpin3.png' ,desc: '三等奖' },
					// { id: 4, name: 1,url:'https://d-shenhuashop.bigchun.com/h5test/yuanbao/choujiang/jiangpin4.png' ,desc: '四等奖' },
					// { id: 5, name: 5,url:'https://d-shenhuashop.bigchun.com/h5test/yuanbao/choujiang/jiangpin5.png' ,desc: '五等奖' },
					// { id: 6, name: 50,url:'https://d-shenhuashop.bigchun.com/h5test/yuanbao/choujiang/jiangpin6.png',desc: '谢谢参与'  },
					// { id: 7, name: 0,url:'https://d-shenhuashop.bigchun.com/h5test/yuanbao/choujiang/jiangpin7.png' ,desc: '代金券' },
					// { id: 8, name: 5,url:'https://d-shenhuashop.bigchun.com/h5test/yuanbao/choujiang/jiangpin8.png',desc: '谢谢参与' }
				],
				btnStart: {
					img: 'https://d-shenhuashop.bigchun.com/h5test/yuanbao/start_btn.png',
					name: '开始抽奖'
				},
				isDrawing: false,
				drawOrder: [0, 1, 2, 5, 8, 7, 6, 3], // 抽奖顺序
				current: 0, // 当前索引值
				currentIndex: '',
				speed: 200, // 时间->速度
				diff: 15, // 基数
				award: {}, // 抽中的奖品
				time: 0, // 当前时间戳
				timer: null, // 定时器
				showZhongjiang: false,
				showWeizhongjiang: false,
				goodsData: {},
				awardsRule: '',
				money: '',
				gift_sum: 0
			};
		},
		onLoad() {
			this.getDrawList();
			this.getDrawRule()
		},
		methods: {
			jump() {
				this.$wanlshop.to('/pages/apps/jinyuanbao/choujiang/choujiangHistory')
			},
			getDrawList() {
				uni.request({
					url: '/wanlshop/user/gift_lists',
					method: 'POST',
					data: {},
					success: res => {
						uni.stopPullDownRefresh();
						this.awards = res.data; //数据 追加
					}
				});
			},
			getDrawRule() {
				uni.request({
					url: '/wanlshop/user/get_gift_config',
					method: 'POST',
					data: {},
					success: res => {
						this.money = res.data.money;
						this.gift_sum = res.data.gift_sum;
						this.awardsRule = res.data.gift_get_yuanbao_ule; //数据 追加
					}
				});
			},

			drawList() {
				return [...this.awards.slice(0, 4), this.btnStart, ...this.awards.slice(4)]
			},
			// 开始抽奖
			start() {
				// 开始抽奖
				this.getLottery();
				this.current = 0, // 当前索引值
					this.currentIndex = '';
				this.timer = null;
				this.time = Date.now();
				this.speed = 200;
				this.diff = 12;
			},
			// 调接口获取奖品
			getLottery() {
				uni.request({
					url: '/wanlshop/user/get_gift',
					method: 'POST',
					data: {},
					success: (res) => {
						console.log("0000", res)
						if (res.res.code == '1') {
							this.award.name = res.data.name;
							this.award.id = res.data.id;
							this.award.log_id = res.data.log_id;
							this.goodsData = res.data;
							this.move();
							this.getDrawRule()
						} else {
							uni.showToast({
								title: `余额不足，请前往充值页面充值`,
								icon: 'none'
							});
						}
					}
				});
			},
			// 开始转动
			move() {
				this.timer = setTimeout(() => {
					this.current++;
					if (this.current > 7) {
						this.current = 0;
					}
					this.currentIndex = this.drawOrder[this.current];
					// 若抽中的奖品id存在，则开始减速转动
					if (this.award.id && (Date.now() - this.time) / 1000 > 2) {
						this.speed += this.diff; // 转动减速
						// 若转动时间超过4秒，并且奖品id等于小格子的奖品id，则停下来
						if (
							(Date.now() - this.time) / 1000 > 4 &&
							this.award.id == this.drawList(this.awards)[this.currentIndex].id
						) {
							clearTimeout(this.timer);
							setTimeout(() => {
								if (this.award.name == '谢谢惠顾') {
									this.showWeizhongjiang = true;
								} else {
									this.showZhongjiang = true;
								}
							}, 0);
							return;
						}
					} else {
						// 若抽中的奖品不存在，则加速转动
						this.speed -= this.diff;
					}
					this.move();
				}, this.speed);

			},
			lingqu() {
				let good_data = [{
					goods_name: this.goodsData.goods_name,
					goods_img: this.goodsData.goods_img,
					goods_id: this.goodsData.goods_id,
				}]
				this.$wanlshop.to(
					`/pages/apps/jinyuanbao/shangpin/tijiaoOrder?good_data=${JSON.stringify(good_data)}&id=${this.award.log_id}`
				);
			}
		}
	};
</script>
<style lang="scss" scoped>
	.main_container {
		width: 100%;
		min-height: 100%;
		background-color: #FF7F00;
		background-size: 100% auto;
		background-repeat: no-repeat;
		font-size: 26px;

		// 作用: 禁用弹窗里的滑动影响页面滑动
		&.prohibit {
			width: 100%;
			height: 100%;
			overflow: hidden;
		}

		// 设置占位符字体颜色
		input::-webkit-input-placeholder {
			color: #a4a5a6;
			font-size: 26px;
		}

		padding: 0px 0px;

		.turntable_box {
			border: 0.5rpx solid transparent;
			width: 100%;
			min-height: 100vh;
			background: url(https://d-shenhuashop.bigchun.com/h5test/yuanbao/bg_chou.png) no-repeat center;
			background-size: 100%;
			background-position-y: 0;

			.container {
				width: 69vw;
				background: #fcebde;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				align-content: space-between;
				margin: 60vw auto 0;

				.prize-item {
					width: 33%;
					height: 21.5vw;
					background: #FDE8CC;
					box-shadow: inset 0px 0px 13px 0px #FFFAF2;
					border-radius: 4px 4px 4px 4px;
					border: 2px solid #FDDAB7;
					display: flex;
					flex-direction: column;
					align-items: center;
					text-align: center;
					position: relative;

					image {
						wwidth: 100%;
						height: 100%;
						margin-top: 4rpx;
					}

					p {
						font-size: 28rpx;
						color: #F14931;
					}

					.active {
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						border: 6rpx solid #327CFF;
						z-index: 1000;
						border-radius: 12rpx;
					}
				}

				.kongbai {
					background: transparent;
					box-shadow: inset 0px 0px 13px 0px transparent;
					border-radius: 4px 4px 4px 4px;
					border: 2px solid transparent;
				}


			}
		}

		.guize {
			width: 94vw;
			margin: 100rpx auto 0;
			background: #FDE8CC;
			border-radius: 30rpx;
			font-size: 28rpx;
			display: flex;
			justify-content: space-between;
			flex-direction: column;
			align-items: center;
			padding: 50rpx 30rpx 30rpx;
			position: relative;

			.guize_item {
				width: 100%;
				color: #333333;
				line-height: 24px;
				text-align: left;
			}

			.guize_title {
				position: absolute;
				left: 0rpx;
				top: -30rpx;
			}
		}
	}

	.lingjiangPopup {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 80vw;
		height: 62vh;

		.jiangpinContent {
			width: 100%;
			height: 100%;
			background: url('https://d-shenhuashop.bigchun.com/h5test/yuanbao/choujiang/zhongjiangBg.png') no-repeat center;
			background-size: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			margin-bottom: 38rpx;
		}

		.lingquBtn {
			width: 100%;
			height: 100rpx;
			background: url('https://d-shenhuashop.bigchun.com/h5test/yuanbao/choujiang/lingqu.png') no-repeat center;
			background-size: 100%;
		}
	}

	.weilingjiangPopup {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 80vw;
		height: 130vw;

		.jiangpinContent {
			width: 100%;
			height: 80%;
			background: url('https://d-shenhuashop.bigchun.com/h5test/yuanbao/choujiang/weizhongjiangBg.png') no-repeat center;
			background-size: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
		}

		.lingquBtn {
			width: 63%;
			height: 116rpx;
			background: url('https://d-shenhuashop.bigchun.com/h5test/yuanbao/choujiang/weizhongjiangBtn.png') no-repeat center;
			background-size: 100%;
		}
	}
</style>